<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<!--1.导入路由包-->
		<script type="text/javascript" src="../js/vue-router.js" ></script>
		
		<style>
			.myactive{
				color:red;
				font-weight:80 ;
				font-style:italic;
				font-size:30px ;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--router-link：默认渲染为 a 标签
				tag:设置渲染的标签
					如: tag=span ,渲染为span标签
			-->
			<router-link to="/login">登录</router-link>
			<router-link to="/register" tag="span">注册</router-link>
			<!--4.放置路由容器-->
			<router-view></router-view>
		</div>
	</body>
	<script>
		var login={template:'<h3>这是登录子组件.........登录</h3>'};
		var register={template:'<h3>这是注册子组件.........注册</h3>'};
		
		//2.创建一个路由对象
		var router=new VueRouter({
			/**
			 * 路由匹配规则
			 */
			//路由规则数组
			routes:[
				//路由重定向
				/**
				 * 每个路由规则，都是一个对象，这个对象上的属性说明:
				 * path：表示路由连接地址
				 * compoment：表示如果匹配到前面的path,则展示component
				 * 			属性对应的那个组件
				 * 注意:compoment的属性值:必须是组件模板对象，不是组件的引用名称
				 */
				//redirect：重定向
				{path:'/',redirect:'/login'},
				//路由指向指定组件
				{path:'/login',component:login},
				{path:'/register',component:register}
			],
			//设置 激活相关的类 ：选择该组件就会激活该类
			linkActiveClass:'myactive' 
		});
	
		var vu=new Vue({
			el:"#app",
			data:{				
			},
			methods:{
			},
			//3.让vm 的router属性执行指向router
			router:router
		});
	</script>
</html>